<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.org/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>车辆列表</title>
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}">
</head>
<body>
<script th:src="@{/resources/layui/layui.js}"></script>
<script th:inline="none">
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','table'], function(){
        var layer = layui.layer,
            form = layui.form,
            table=layui.table,
            $=layui.jquery;
        var tableVehicle=table.render({
            elem:'#vehicleTable',
            height:425,
            url:'/vehiclefiles/getVehiclefilesList',
            id:'vehicleListTable',
            page:true,
            limits:[3,6,9,12],
            limit:3,
            done:function(resp){
                if(resp.code==201){
                    layer.msg(resp.message);
                }
            },
            cols:[[
                {field: 'id', title: '编号',type:"checkbox"},
                {field: 'vehiclenum', title: '车牌号'},
                {field: 'brand', title: '车辆品牌',templet:function(obj){
                    return obj.brand.name;
                }},
                {field: 'color', title: '车辆颜色',templet:function(obj){
                    return obj.color.name;
                }},
                {field: 'seat', title: '座位数'},
                {field: 'statusid', title: '车辆状态',width:50,templet:function(obj){
                    return obj.status.name;
                }},
                {field:'available',title:'是否启用',width:50,templet:function(obj){
                    return obj.available==1?"启用":"停用";
                }},
                {title:'操作',width:260,templet:'#vehicleListBar',fixed:"right",align:"center"}
            ]]
        });
        //搜索功能
        $(".searchBtn").click(function(){
            var vehiclenum=$("#vehiclenum").val();
            var statusid=$("#statusid").val();
            table.reload('vehicleListTable',{url:"/vehiclefiles/getVehiclefilesList?vehiclenum="+vehiclenum+"&status.id="+statusid});
        });
        //车辆状态下拉菜单
        $.ajax({
            type:"GET",
            url:"/dictionary/getCarStatus",
            success:function(resp){
                var carStatusList=resp.data.carStatusList;
                if(carStatusList.length>0){
                    for(var i=0;i<carStatusList.length;i++){
                        var carStatus=carStatusList[i];
                        $("#statusid").append("<option value='"+carStatus.id+"'>"+carStatus.name+"</option>");
                    }
                }
                //渲染下拉菜单
                layui.form.render("select");
            }
        });
        //批量删除
        $("#removeBtn").click(function(){
            var checkStatus = table.checkStatus("vehicleListTable");
            var data = checkStatus.data;
            var ids=new Array();
            if(data.length==0){
                layer.msg("请至少选择一条信息")
            }else{
                for(var i=0;i<data.length;i++){
                    ids.push(data[i].id);
                }
                layer.confirm('确定删除选中的车辆？',{icon:3,title:'提示信息'},function(index){
                    $.ajax({
                        type:"post",
                        url:"/vehiclefiles/removeVehiclefiles",
                        data:{ids:ids},
                        /**
                         * 使用ajax向后台传递数组必须设置traditional:true!!!！！！
                         */
                        traditional:true,
                        success:function(resp){
                            console.log(resp);
                            if(resp.code==200){
                                //刷新表格
                                tableVehicle.reload();
                                //关闭提示窗口
                                layer.close(index);
                            }else if(resp.code==201||resp.code==208){
                                layer.msg(resp.message);
                            }
                        }
                    });
                });
            }
        });

        table.on("tool(vehicleTableList)",function(obj){
            var data = obj.data;
            switch(obj.event){
                case 'del':
                    layer.confirm('确定删除选中的车辆？',{icon:3,title:'提示信息'},function(index) {
                        $.ajax({
                            type: "get",
                            url: "/vehiclefiles/removeVehicleById",
                            data: {id: data.id},
                            traditional: true,
                            success: function (resp) {
                                layer.msg(resp.message);
                                tableVehicle.reload();
                            }
                        });
                    });
                    break;
                case 'edit':
                    var editIndex=layer.open({
                        type:2,
                        title:'修改',
                        content:'/goUpdateVehiclefile',
                        area:['800px','520px'],
                        success:function(layero,index){
                            var body = layer.getChildFrame('body',index);
                            body.find("#vehid").val(data.id);
                        },
                        btn:['确定','关闭'],
                        yes:function(index,layero){
                            var res = window["layui-layer-iframe"+index].callbackdata();
                            var formdata = decodeURIComponent(res,true);
                            console.log("formdata:"+formdata);
                            $.ajax({
                                type:"get",
                                url:"/vehiclefiles/updateVehiclefiles",
                                data:formdata,
                                traditional:true,
                                success:function(resp){
                                    console.log(resp);
                                    if(resp.code==200){
                                        layer.msg(resp.message);
                                        layer.close(editIndex);
                                        window.location.href="/goVehiclefilesList";
                                    }
                                }
                            });
                        },
                        btn2:function(index,layero){
                            layer.close(editIndex);
                        }
                    });
                    break;
                case 'detail':
                    var detailIndex=layer.open({
                        type:2,
                        title:'查看详情',
                        content:'/goDetailVehiclefile',
                        area:['700px','500px'],
                        success:function(layero,index){
                            var body = layer.getChildFrame('body',index);
                            body.find("#vehiddtl").val(data.id);
                        },
                        btn:['关闭'],
                        yes:function(index,layero){
                            layer.close(detailIndex);
                        }
                    });
                    break;
                case 'imgmana':
                    var imgmanaIndex=layer.open({
                        type:2,
                        title:'照片管理',
                        content:'/goImgmanaVehiclefile',
                        area:['800px','520px'],
                        success:function(layero,index){
                            var body = layer.getChildFrame('body',index);
                            body.find("#vehid").val(data.id);
                        }
                    });
                    break;
            }
        });

        $("#addBtn").click(function(){
            var addVehiclefileIndex=layer.open({
                type:2,
                content:'/goAddVehiclefile',
                area:['800px','520px'],
                btn:['确定','关闭'],
                yes:function(index,layero){
                    var res = window["layui-layer-iframe"+index].addcallbackdata();
                    var formdata = decodeURIComponent(res,true);
                    $.ajax({
                        type:"post",
                        url:"/vehiclefiles/addVehicle",
                        data:formdata,
                        success:function(resp){
                            console.log(resp);
                            if(resp.code==200){
                                layer.msg(resp.message);
                                layer.close(addVehiclefileIndex);
                                window.location.href="/goVehiclefilesList";
                            }
                        }
                    });
                },
                btn2:function(index,layero){
                    layer.close(addVehiclefileIndex);
                }
            });
        });
    });
</script>
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline">
            <input type="text" class="layui-input" id="vehiclenum" placeholder="请输入车牌号，支持模糊查询">
        </div>
        <div class="layui-inline">
            <select id="statusid">
                <option value="0">请选择车辆状态</option>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn searchBtn">
                <i class="layui-icon-search">&#xe615;</i> 搜索
            </button>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-danger" id="removeBtn">
                批量删除
            </button>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-warm" id="addBtn">
                增加车辆
            </button>
        </div>
    </form>
</blockquote>
<table id="vehicleTable" lay-filter="vehicleTableList"></table>
<!--操作-->
<script type="text/html" id="vehicleListBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="imgmana">照片管理</a>
</script>
</body>
</html>